﻿@model ListenMusic.Song_ServiceReference.DataContract_Song
@{
    ViewBag.Title = "ListenPage";
    Layout = "~/Views/Shared/_LayoutPublic.cshtml";
}  

<link href="../../Styles/MusicPlayer.css" rel="stylesheet" type="text/css" />
<div id="music-content">
    <div id="music-left">
        <div id="music-title">
            <ul>
                <li><h1>@Model.SongName</h1></li>
                <li class="sub-music"><h5>Sáng tác: @Model.MusicianName | Album:  <a href="#">@Model.AlbumName</a> | Thể loại: <a href="#">@Model.CategoryName</a></h5>    </li>
            </ul>            
        </div>
        <div id="music-player">
           <div id="container1"></div>
           <script src="../../JWPlayer/jwplayer.js" type="text/javascript"></script>
            <script type="text/javascript">
                jwplayer("container1").setup
                (
                  {                    
                    'flashplayer': '../../JWPlayer/player.swf',
                    'file': '../../Music/@Model.SongURL',
                    'image': '../../Images/logo.png',
                    'width': 670,
                    'height': 100,
                   }
             )   
    </script>
        </div>
        <div id="sub-menu">
            <ul>
                <li><a href="#" title="Tải bài hát về máy tính" class="button-sub">Tải về</a></li>
                <li><a href="#" title="Thêm vào danh sách yêu thích" class="button-sub">Thêm</a></li>
                <li><a href="#" title="Chia sẽ" class="button-sub">Chia sẽ</a></li>
                <li><a href="#" title="Thông báo bài hát bị lỗi" class="button-sub">Báo lỗi</a></li>
            </ul>      
        </div>
        <div id="more-details">
            <div id="lyrics">
                <h3 class="title">Lời bài hát</h3>
                <div id="lyric-details">
                    <p id="text-lyric">
                            I let it fall, my heart, <br />
                            And as it fell you rose to claim it <br />
                            It was dark and I was over <br />
                            Until you kissed my lips and you saved me <br />

                            My hands, they're strong <br />
                            But my knees were far too weak <br />
                            To stand in your arms <br />
                            Without falling to your feet <br />
                    </p>
                    <a href="#">Xem toàn bộ >></a>
                </div>
            </div>  
                       
            <div id="same-albums">
                <h3 class="title">Album cùng ca sĩ</h3>
                    <ul>
                        <li class="abc">
                            <a href="#"><img src="../../Images/albums/album-21.jpg" title="Album 21 - Adele" width="100px" height"100px" /></a>                                                                                 
                            <label>21</label>
                        </li>

                         <li class="abc">
                            <a href="#"><img src="../../Images/albums/album-21.jpg" title="Album 21 - Adele" width="100px" height"100px" /></a>                                                                                 
                            <label>21</label>
                        </li>

                         <li class="abc">
                            <a href="#"><img src="../../Images/albums/album-21.jpg" title="Album 21 - Adele" width="100px" height"100px" /></a>                                                                                 
                            <label>21</label>
                        </li>
                    </ul>
            </div>
            <div id="same-videos">
                <h3 class="title">Video cùng ca sĩ</h3>
                <ul>
                    <li>Video 1</li>
                    <li>Video 1</li>
                    <li>Video 1</li>
                    <li>Video 1</li>
                    <li>Video 1</li>
                </ul>
            </div>
             <div id="same-songs">
                <h3 class="title">Bài hát cùng ca sĩ</h3>
                <div id="content-same-songs">                   
                     <ul id="content-same-songs-left">
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                    </ul>
                    <ul id="content-same-songs-right">
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                        <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a> <h5 class="sub-music">Lượt nghe: 0</h5></li>
                    </ul>
                </div>
            </div>

             <div id="comments">
                <h3 class="title">Bình luận</h3>
                <div id="exist-comment">
                    <p class="content-comment"><span><img src="../../Images/Avatars/noimage.gif" width="50" height="70" /></span>Bài hát dở òm</p>
                    <p class="content-comment"><span><img src="../../Images/Avatars/noimage.gif" width="50" height="70" />User2: </span>Bài hát dở òm</p>
                    <p class="content-comment"><span><img src="../../Images/Avatars/noimage.gif" width="50" height="70" />User2: </span>Bài hát dở òm</p>
                    <p class="content-comment"><span><img src="../../Images/Avatars/noimage.gif" width="50" height="70" />User3: </span>Bài hát dở òm</p>
                    <p class="content-comment"><span><img src="../../Images/Avatars/noimage.gif" width="50" height="70" />User4: </span>Bài hát dở òm</p>
                </div>
                <div id="new-comment">
                    <input type="text" id="txt-comment" title="Gửi bình luận cho bài hát này" /> <br />
                    <input style="margin-left:550px; margin-bottom:15px;" type="button" class="button" value="Gửi bình luận" />
                </div>
            </div>  
        </div>
    </div>
    <div id="music-right">
        <div id="right-content">
            <h3 class="title">Cùng dòng nhạc</h3>    
            <div>
                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a></li>
                    <li>Adele</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Safe & Sound</h4></a></li>
                    <li>Taylor Swift</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">You belong with me</h4></a></li>
                    <li>Taylor Swift</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">We are the world</h4></a></li>
                    <li>Michael Jackson</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a></li>
                    <li>Adele</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a></li>
                    <li>Adele</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a></li>
                    <li>Adele</li>
                </ul>

                <ul class="right-content-details">
                    <li><a href="#"><h4 class="name-music">Rolling in the deep</h4></a></li>
                    <li>Adele</li>
                </ul>

            </div>
        </div>
        
    </div>    
</div>




